<template>
	<view class="container">
		<view class="content">
			<text class="subtitle">展示二维码</text>
			<view class="qrcode-wrapper">
				<view v-if="loading">
					<div id="loader"></div>
				</view>
				<!-- <image :src="QRCode"></image> -->
				<uv-qrcode ref="qrcode" size="480rpx" :value="EWMurl"></uv-qrcode>
				<!-- <uv-qrcode ref="qrcode" size="480rpx" value="https://huaqing.xgxtravel.com/startApp?agentid='123'"></uv-qrcode> -->
			</view>
			<button class="floating-button" @tap="refreshQRCode">点击刷新</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'pinia';
	import {
		useUserInfoStore
	} from '../../../stores/userInfo.js';
	export default {
		data() {
			return {
				loading: 'true',
				QRCode: '',
				EWMurl: ''
			}
		},
		computed: {
			...mapState(useUserInfoStore, ['id', 'phone', 'username', 'state']),
		},
		onLoad() {
			// console.log(this.EWMurl)
			this.EWMurl = 'https://huaqing.xgxtravel.com/startApp?agentid=' + this.id
			console.log(this.EWMurl)
			setTimeout(() => {
				this.loading = false
			}, 700)
			this.refreshQRCode()
		},
		methods: {
			async refreshQRCode() {
				//加载动画
				this.loading = true
				setTimeout(() => {
					this.loading = false
				}, 700)
				// await generateOR('123245').then(res=>{
				// let datas = res;

				// this.QRCode = 'data:image/png;base64,'+uni.arrayBufferToBase64(datas);
				// this.QRCode =`data:image/png;base64,${res}`;
				// console.log(res)
				// let base64=this.QRCode.substring(this.QRCode.indexOf(',') + 1)
				// console.log(this.base64ToString(base64))
				// })
				//数据处理

				// 刷新二维码的逻辑，可以调用接口获取新的二维码
				this.$refs.qrcode.remake({
					success: () => {
						console.log('生成成功');
					},
					fail: err => {
						console.log(err)
					}
				});
				console.log('二维码刷新');
			}
		}
	};
</script>

<style>
	#loader {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -35px;
		margin-top: -35px;
		width: 70px;
		height: 70px;
		border-style: solid;
		border-top-color: #0b69e2;
		border-right-color: #0b69e2;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
		animation: rotate 3s ease-in-out infinite;
		transform: rotate(-200deg)
	}

	.floating-button {
		position: fixed;
		width: 450rpx;
		height: 100rpx;
		line-height: 62rpx;
		bottom: 6%;
		left: 50%;
		transform: translateX(-50%);
		padding: 10px 20px;
		background-color: #007aff;
		color: #ffffff;
		border: none;
		border-radius: 10px;
		z-index: 10;
	}

	@keyframes rotate {
		0% {
			border-width: 10px;
		}

		25% {
			border-width: 3px;
		}

		50% {
			transform: rotate(115deg);
			border-width: 10px;
		}

		75% {
			border-width: 3px;
		}

		100% {
			border-width: 10px;
		}
	}

	.container {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
		padding: 0 20px;
	}

	.subtitle {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-top: 50rpx;
		margin-bottom: 160rpx;
	}

	.description {
		font-size: 14px;
		color: #666;
		text-align: center;
		margin-bottom: 20px;
	}

	.qrcode-wrapper {
		position: relative;
		padding: 10px;
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.qrcode {
		width: 200px;
		height: 200px;
	}

	.refresh-button {
		width: 80%;
		height: 40px;
		background-color: #007bff;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
	}
</style>